<template>
  <div class="sort-list">
    <mt-header fixed :title="name">
      <div slot="left" @click="$router.go(-1)">
        <mt-button icon="back">返回</mt-button>
      </div>
    </mt-header>

    <!--mescroll滚动区域的基本结构-->
    <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
      <!--内容...-->
      <ul id="sort_list">
        <li v-for="item in dataList" :key="item._id" class="item_list_style">
          <a :href="item.url">
            <div class="item_content">
              <div class="item_content_left">
                <p>{{ item.desc }}</p>
                <div class="item_info">
                  <span class="author_style">{{ '(' + item.who + ')' }}</span>
                  <span>{{ formatDate(item.publishedAt) }}</span>
                </div>
              </div>
              <div class="item_content_right" v-if="item.images">
                <img :imgurl="item.images[0]" src="../../static/images/mescroll-empty.png" alt>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </mescroll-vue>
  </div>
</template>
<script>
import dayjs from "dayjs";
import { mapState, mapActions } from "vuex";
// 引入mescroll的vue组件
import MescrollVue from "mescroll.js/mescroll.vue";

export default {
  name: "SortList",
  components: {
    MescrollVue // 注册mescroll组件
  },
  data() {
    return {
      name: "",
      dataList: [],
      mescroll: null, //mescroll实例对象
      pageIndex: 1,
      mescrollDown: {}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
      mescrollUp: {
        // 上拉加载的配置.
        callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
        //以下是一些常用的配置,当然不写也可以的.
        page: {
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 10 //每页数据条数,默认10
        },
        htmlNodata: '<p class="upwarp-nodata">亲,没有更多数据了~</p>',
        noMoreSize: 5, //如果列表已无数据,可设置列表总数大于5才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
        toTop: {
          //回到顶部按钮
          // src: "./static/image/mescroll-totop.png", //图片路径,默认null,支持网络图
          src: "../../static/images/mescroll-totop.png",
          offset: 1000 //列表滚动1000px才显示回到顶部按钮
        },
        empty: {
          //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
          warpId: "sort_list", //父布局的id (1.3.5版本支持传入dom元素)
          icon: "../../static/images/mescroll-empty.png", //图标,默认null,支持网络图
          tip: "暂无相关数据~", //提示
          btntext: "去逛逛 >", // 按钮,默认""
          btnClick() {
            // 点击按钮的回调,默认null
            alert("点击了按钮,具体逻辑自行实现");
          }
        },
        lazyLoad: {
          use: true, // 是否开启懒加载,默认false
          attr: "imgurl", // 网络图片地址的属性名 (图片加载成功会自动移除改属性): <img imgurl='网络图  src='占位图''/>
          showClass: "mescroll-lazy-in", // 图片加载成功的显示动画: 渐变显示,参见mescroll.css
          delay: 500, // 列表滚动的过程中每500ms检查一次图片是否在可视区域,如果在可视区域则加载图片
          offset: 200 // 超出可视区域200px的图片仍可触发懒加载,目的是提前加载部分图片
        }
      }
    };
  },
  computed: {
    ...mapState(["sortList"])
  },
  created() {
    const name = this.$route.query.name;
    this.name = name;
  },
  beforeRouteLeave(to, from, next) {
    // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
    // 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteLeave方法
    this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave(); // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
    next();
  },
  methods: {
    ...mapActions(["loadSortList"]),
    formatDate(time) {
      const date = dayjs(time).format("YYYY/MM/DD");
      return date;
    },
    // mescroll组件初始化的回调,可获取到mescroll对象 (如果this.mescroll并没有使用到,可不用写mescrollInit)
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
    upCallback(page, mescroll) {
      let playload = {
        name: this.name,
        num: page.num,
        size: page.size
      };
      this.loadSortList(playload).then(
        success => {
          let arr = this.sortList["results"];
          if (page.num === 1) this.dataList = [];
          this.dataList = this.dataList.concat(arr);

          this.$nextTick(() => {
            this.mescroll.endSuccess(arr.length);
          });
        },
        error => {
          console.log(error);
          this.mescroll.endErr();
        }
      );
    }
  }
};
</script>
<style scoped>
ul {
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0;
}
p {
  text-align: left;
  margin: 5px 10px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.mescroll {
  position: fixed;
  top: 40px;
  bottom: 0;
  height: auto;
}
.item_list_style {
  border-bottom: 1px solid #dcdcdc;
}
.author_style {
  margin: 0 10px;
}
.item_info {
  margin: 5px 0;
}
.item_content {
  display: flex;
}
.item_content_left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 70%;
}
.item_content_right {
  width: 30%;
}
.item_content_right img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  vertical-align: middle;
  background-position: center center;
  background-repeat: no-repeat;
}
</style>
